#ifndef _WEBPAGE_H_
#define _WEBPAGE_H_

/*************************************************************************************
 * JavaScript Functions
 *************************************************************************************/

#define wiz550web_ajax_js 	"function AJAX(a,e){var c=d();c.onreadystatechange=b;function d(){if(window.XMLHttpRequest){return new XMLHttpRequest()}else{if(window.ActiveXObject){return new ActiveXObject(\"Microsoft.XMLHTTP\")}}}function b(){if(c.readyState==4){if(c.status==200){if(e){e(c.responseText)}}}}this.doGet=function(){c.open(\"GET\",a,true);c.send(null)};this.doPost=function(f){c.open(\"POST\",a,true);c.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\");c.setRequestHeader(\"ISAJAX\",\"yes\");c.send(f)}}function $(a){return document.getElementById(a)}function $$(a){return document.getElementsByName(a)}function $$_ie(a,c){if(!a){a=\"*\"}var b=document.getElementsByTagName(a);var e=[];for(var d=0;d<b.length;d++){att=b[d].getAttribute(\"name\");if(att==c){e.push(b[d])}}return e}"

/* Get: Network Information: function NetinfoCallback(o), getNetinfo() */
#define wiz550web_netinfo_js  \	
                   "function NetinfoCallback(o){"\
									 "$('txtmac').value=o.mac;"\
									 "$('txtip').value=o.ip;"\
									 "$('txtgw').value=o.gw;"\
									 "$('txtsn').value=o.sn;"\
									 "$('txtdns').value=o.dns;"\
									 "if(typeof(window.external)!='undefined'){"\
										"obj=$$_ie('input','dhcp');"\
									 "}else{"\
										"obj=$$('dhcp');"\
									 "}"\
								"}"\
								" "\
								"function getNetinfo(){"\
									 "var oUpdate;"\
									 "setTimeout(function(){"\
									 	"oUpdate=new AJAX('get_netinfo.cgi',function(t){"\
									 		"try{eval(t);}catch(e){alert(e);}"\
									 "});"\
									 "oUpdate.doGet();},300);"\
								 "}"\
								 "function saveNetConfig(o){"\
									"var ip=$('txtip').value;"\
									"var gw=$('txtgw').value;"\
									"var sn=$('txtsn').value;"\
                                    "var dns=$('txtdns').value;"\
                                    "var mac=$('txtmac').value;"\									
									"var oUpdate;"\
									"oUpdate=new AJAX('set_netinfo.cgi',function(t){"\
										"try{eval(t);}catch(e){alert(e);}"\
									"});"\
									"oUpdate.doPost('ip=' + ip "\
									"            + '&gw=' + gw "\
									"            + '&sn=' + sn "\
									"            + '&dns=' + dns "\
									"            + '&mac=' + mac);"\
									"alert('Network Configuration Saved');"\								
									" window.location.href='http://'+ ip + '/netinfo.html';"\
								"}"

#define wiz550web_socketinfo_js  \
                "function SocketInfoCallback(o){"\
								"  for (var i = 0; i < 6; i++) {"\
								"    var s = o['sock' + i];"\
								"    if (!s) continue;"\
								"    $('sock'+i+'_local').value = s.local;"\
								"    $('sock'+i+'_rip').value   = s.rip;"\
								"    $('sock'+i+'_rport').value = s.rport;"\
								"  }"\
								"}"\
								""\
                "function getSocketConfig(){"\
                "  var oUpdate;"\
                "  setTimeout(function(){"\
                "    oUpdate = new AJAX('get_socketinfo.cgi', function(t){"\
                "      try { eval(t); } catch(e) { alert(e); }"\
                "    });"\
                "    oUpdate.doGet();"\
                "  }, 300);"\
                "}"\
                ""\
                "function saveSocketConfig(){"\
								"  var data = '';"\
								"  for (var i = 0; i < 6; i++) {"\
								"    var local = $('sock'+i+'_local').value;"\
								"    var rip   = $('sock'+i+'_rip').value;"\
								"    var rport = $('sock'+i+'_rport').value;"\
								"    data += 's'+i+'_local=' + encodeURIComponent(local) + '&';"\
								"    data += 's'+i+'_rip='   + encodeURIComponent(rip) + '&';"\
								"    data += 's'+i+'_rport=' + encodeURIComponent(rport) + '&';"\
								"  }"\
								"  data = data.slice(0, -1);"\
								"  var oUpdate = new AJAX('set_socketinfo.cgi', function(t){"\
								"    try { eval(t); } catch(e) { alert(e); }"\
								"  });"\
								"  oUpdate.doPost(data);"\
								"  alert('Socket Configuration Saved');"\
								"}"

#define wiz550web_uartinfo_js  \
								"function UartInfoCallback(o){"\
								"  for (var i = 0; i < 6; i++) {"\
								"    var u = o['uart' + i];"\
								"    if (!u) continue;"\
								"    $('uart'+i+'_baud').value     = u.BaudRate;"\
								"    $('uart'+i+'_databits').value = u.DataBits;"\
								"    $('uart'+i+'_stopbits').value = u.StopBits;"\
								"    $('uart'+i+'_parity').value = u.Parity.toString();"\
								"  }"\
								"}"\
								""\
								"function getUartConfig(){"\
								"  setTimeout(function(){"\
								"    var oUpdate = new AJAX('get_uartinfo.cgi', function(t){"\
								"      try { eval(t); } catch(e) { alert(e); }"\
								"    });"\
								"    oUpdate.doGet();"\
								"  }, 300);"\
								"}"\
								""\
								"function saveUartConfig(){"\
								"  var data = '';"\
								"  for (var i = 0; i < 6; i++) {"\
								"    var baud     = $('uart'+i+'_baud').value;"\
								"    var databits = $('uart'+i+'_databits').value;"\
								"    var stopbits = $('uart'+i+'_stopbits').value;"\
								"    var parity   = $('uart'+i+'_parity').value;"\
								"    data += 'u'+i+'_baud='     + encodeURIComponent(baud) + '&';"\
								"    data += 'u'+i+'_databits=' + encodeURIComponent(databits) + '&';"\
								"    data += 'u'+i+'_stopbits=' + encodeURIComponent(stopbits) + '&';"\
								"    data += 'u'+i+'_parity='   + encodeURIComponent(parity) + '&';"\
								"  }"\
								"  data = data.slice(0, -1);"\
								"  var oUpdate = new AJAX('set_uartinfo.cgi', function(t){"\
								"    try { eval(t); } catch(e) { alert(e); }"\
								"  });"\
								"  oUpdate.doPost(data);"\
								"  alert('UART Configuration Saved');"\
								"}"


#define wiz550web_dio_js	"function DioCallback(o){"\
								"var pin = o.dio_p;"\
								"$('txtdio_s'+pin).value=o.dio_s;"\
								"$('txtdio_d'+pin).value=o.dio_d;"\
							"}"\
							"function getDio(o) {"\
								"var p=o.attributes['pin'].value;"\
								"var oUpdate;"\
								"oUpdate=new AJAX('get_dio'+p+'.cgi',function(t){try{eval(t);}catch(e){alert(e);}});"\
								"oUpdate.doGet();"\
							"}"\
							" "\
							"function setDiostate(o){"\
								"var p=o.attributes['pin'].value;"\
								"/*var v=$('txtdio_s'+p).value;*/"\
								"var v=o.attributes['s'].value;"\
								"dout=new AJAX('set_diostate.cgi', function(t){try{eval(t);}catch(e){alert(e);}});"\
								"dout.doPost('pin='+p+'&val='+v);"\
							"}"\
							" "\
							"function setDiodir(o){"\
								"var p=o.attributes['pin'].value;"\
								"/*var v=$('txtdio_d'+p).value;*/"\
								"var v=o.attributes['d'].value;"\
								"dout=new AJAX('set_diodir.cgi', function(t){try{eval(t);}catch(e){alert(e);}});"\
								"dout.doPost('pin='+p+'&val='+v);"\
							"}"

/*************************************************************************************
 * HTML Pages (web pages)
 *************************************************************************************/
// 主页
#define index_page			"<html>"\
								"<head>"\
								"<title>W5500-EVB Web Server</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"\
								"</head>"\
								"<body>"\
									"<div>"\
									"W5500-EVB Web Server Demopage"\
									"</div>"\
									"<br>"\
									"<a href='netinfo.html'>Network Information</a>"\
									"<br>"\
									"<a href='uartinfo.html'>Uart Information</a>"\
									"<br>"\
									"<a href='socketinfo.html'>Socket Information</a>"\
									"<br>"\
									"<a href='dio.html'>Ex1> Digital I/O</a>"\
									"<br>"\
							"</html>"

//网络信息页
#define netinfo_page 		"<!DOCTYPE html>"\
							"<html>"\
								"<head>"\
								"<title>W5500-EVB Web Server Network Info</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"\
								"<style>"\
								"label{float:left;text-align:left;width:50px;}"\
								"li {list-style:none;}"\
								"</style>"\
								"<script type='text/javascript' src='ajax.js'></script>"\
								"<script type='text/javascript' src='netinfo.js'></script>"\
								"</head>"\
								"<body onload='getNetinfo();'>"\
									"<div>"\
									"W5500-EVB Web Server Network Information"\
									"</div>"\
									"<br>"\
									"<ul>"\
										"<li><label for='txtmac'>MAC:</label><input id='txtmac' name='mac' type='text' size='20' /></li> "\
										"<li><label for='txtip'>IP:</label><input id='txtip' name='ip' type='text' size='20' /></li> "\
										"<li><label for='txtgw'>GW:</label><input id='txtgw' name='gw' type='text' size='20' /></li> "\
										"<li><label for='txtsn'>SN:</label><input id='txtsn' name='sn' type='text' size='20' /></li> "\
										"<li><label for='txtdns'>DNS:</label><input id='txtdns' name='dns' type='text' size='20'/></li> "\										
									"</ul>"\
										"<br>"\
									    "<input type='button' value='Save' pin='4' s='1' onclick='saveNetConfig(this);'> "\
								"</body>"\
								"</body>"\
							"</html>"
//socket信息页
#define socketinfo_page 		"<!DOCTYPE html>"\
              "<html>"\
              "<head>"\
              "<title>W5500-EVB Web Socket Config</title>"\
              "<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"\	
              "<style>"\
              "label{display:inline-block;width:130px;text-align:right;padding-right:10px;}"\
              "li {list-style:none;margin-bottom:10px;}"\
              "input{margin-right:10px;}"\
              "</style>"\
              "<script type='text/javascript' src='ajax.js'></script>"\
              "<script type='text/javascript' src='socketinfo.js'></script>"\
              "</head>"\
              "<body onload='getSocketConfig();'>"\	
              "<h2>W5500 Socket Configuration Page</h2>"\
              "<form id='socketForm'>"\	
              "<ul>"\
              "<li><b>Socket 0:</b><br>"\
              "  <label>Local Port:</label><input id='sock0_local' type='text' size='6'>"\
              "  <label>Remote IP:</label><input id='sock0_rip' type='text' size='15'>"\
              "  <label>Remote Port:</label><input id='sock0_rport' type='text' size='6'>"\
              "</li>"\
              "<li><b>Socket 1:</b><br>"\
              "  <label>Local Port:</label><input id='sock1_local' type='text' size='6'>"\
              "  <label>Remote IP:</label><input id='sock1_rip' type='text' size='15'>"\
              "  <label>Remote Port:</label><input id='sock1_rport' type='text' size='6'>"\
              "</li>"\
              "<li><b>Socket 2:</b><br>"\
              "  <label>Local Port:</label><input id='sock2_local' type='text' size='6'>"\
              "  <label>Remote IP:</label><input id='sock2_rip' type='text' size='15'>"\
              "  <label>Remote Port:</label><input id='sock2_rport' type='text' size='6'>"\
              "</li>"\
              "<li><b>Socket 3:</b><br>"\
              "  <label>Local Port:</label><input id='sock3_local' type='text' size='6'>"\
              "  <label>Remote IP:</label><input id='sock3_rip' type='text' size='15'>"\
              "  <label>Remote Port:</label><input id='sock3_rport' type='text' size='6'>"\
              "</li>"\
              "<li><b>Socket 4:</b><br>"\
              "  <label>Local Port:</label><input id='sock4_local' type='text' size='6'>"\
              "  <label>Remote IP:</label><input id='sock4_rip' type='text' size='15'>"\
              "  <label>Remote Port:</label><input id='sock4_rport' type='text' size='6'>"\
              "</li>"\
              "<li><b>Socket 5:</b><br>"\
              "  <label>Local Port:</label><input id='sock5_local' type='text' size='6'>"\
              "  <label>Remote IP:</label><input id='sock5_rip' type='text' size='15'>"\
              "  <label>Remote Port:</label><input id='sock5_rport' type='text' size='6'>"\
              "</li>"\
              "</ul>"\
              "<input type='button' value='Save Socket Config' onclick='saveSocketConfig();'>"\	
              "</form>"\
              "</body>"\
              "</html>"
#define uartinfo_page        "<!DOCTYPE html>"\
              "<html>"\
              "<head>"\
              "<title>UART Config Page</title>"\
              "<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"\
              "<style>"\
              "label{display:inline-block;width:130px;text-align:right;padding-right:10px;}"\
              "li {list-style:none;margin-bottom:10px;}"\
              "input, select{margin-right:10px;}"\
              "</style>"\
              "<script type='text/javascript' src='ajax.js'></script>"\
              "<script type='text/javascript' src='uartinfo.js'></script>"\
              "</head>"\
              "<body onload='getUartConfig();'>"\
              "<h2>UART Configuration Page</h2>"\
              "<form id='uartForm'>"\
              "<ul>"\
              "<li><b>UART 0:</b><br>"\
              "  <label>Baud Rate:</label><input id='uart0_baud' type='text' size='10' disabled style='background-color:#f0f0f0; color:#888;'>"\
              "  <label>Data Bits:</label><input id='uart0_databits' type='text' size='5' disabled style='background-color:#f0f0f0; color:#888;'>"\
              "  <label>Stop Bits:</label><input id='uart0_stopbits' type='text' size='5' disabled style='background-color:#f0f0f0; color:#888;'>"\
              "  <label>Parity:</label><select id='uart0_parity' disabled style='background-color:#f0f0f0; color:#888;'>"\
              "<option value='0'>None</option><option value='1'>Odd</option><option value='2'>Even</option></select>"\
              "</li>"\
              "<li><b>UART 1:</b><br>"\
              "  <label>Baud Rate:</label><input id='uart1_baud' type='text' size='10'>"\
              "  <label>Data Bits:</label><input id='uart1_databits' type='text' size='5'>"\
              "  <label>Stop Bits:</label><input id='uart1_stopbits' type='text' size='5'>"\
              "  <label>Parity:</label><select id='uart1_parity'>"\
              "<option value='0'>None</option><option value='1'>Odd</option><option value='2'>Even</option></select>"\
              "</li>"\
              "<li><b>UART 2:</b><br>"\
              "  <label>Baud Rate:</label><input id='uart2_baud' type='text' size='10'>"\
              "  <label>Data Bits:</label><input id='uart2_databits' type='text' size='5'>"\
              "  <label>Stop Bits:</label><input id='uart2_stopbits' type='text' size='5'>"\
              "  <label>Parity:</label><select id='uart2_parity'>"\
              "<option value='0'>None</option><option value='1'>Odd</option><option value='2'>Even</option></select>"\
              "</li>"\
              "<li><b>UART 3:</b><br>"\
              "  <label>Baud Rate:</label><input id='uart3_baud' type='text' size='10'>"\
              "  <label>Data Bits:</label><input id='uart3_databits' type='text' size='5'>"\
              "  <label>Stop Bits:</label><input id='uart3_stopbits' type='text' size='5'>"\
              "  <label>Parity:</label><select id='uart3_parity'>"\
              "<option value='0'>None</option><option value='1'>Odd</option><option value='2'>Even</option></select>"\
              "</li>"\
              "<li><b>UART 4:</b><br>"\
              "  <label>Baud Rate:</label><input id='uart4_baud' type='text' size='10'>"\
              "  <label>Data Bits:</label><input id='uart4_databits' type='text' size='5'>"\
              "  <label>Stop Bits:</label><input id='uart4_stopbits' type='text' size='5'>"\
              "  <label>Parity:</label><select id='uart4_parity'>"\
              "<option value='0'>None</option><option value='1'>Odd</option><option value='2'>Even</option></select>"\
              "</li>"\
              "<li><b>UART 5:</b><br>"\
              "  <label>Baud Rate:</label><input id='uart5_baud' type='text' size='10'>"\
              "  <label>Data Bits:</label><input id='uart5_databits' type='text' size='5'>"\
              "  <label>Stop Bits:</label><input id='uart5_stopbits' type='text' size='5'>"\
              "  <label>Parity:</label><select id='uart5_parity'>"\
              "<option value='0'>None</option><option value='1'>Odd</option><option value='2'>Even</option></select>"\
              "</li>"\
              "</ul>"\
              "<input type='button' value='Save Uart Config' onclick='saveUartConfig();'>"\
              "</form>"\
              "</body>"\
              "</html>"

              
// LED����ҳ��
#define dio_page  			"<!DOCTYPE html>"\
							"<html>"\
								"<head>"\
								"<title>W5500-EVB Web Server Digital I/O</title>"\
								"<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"\
								"<script type='text/javascript' src='ajax.js'></script>"\
								"<script type='text/javascript' src='dio.js'></script>"\
								"</head>"\
								"<body>"\
									"<!-- to do -->"\
									"<div>"\
									"<input type='button' value='LED 1 On' pin='1' s='0' onclick='setDiostate(this);'> "\
									"<input type='button' value='LED 1 Off' pin='1' s= '1' onclick='setDiostate(this);'>"\
									"<br>"\
									"<input type='button' value='LED 2 On' pin='2' s='1' onclick='setDiostate(this);'> "\
									"<input type='button' value='LED 2 Off' pin='2' s= '0' onclick='setDiostate(this);'>"\
									"<br>"\
									"<input type='button' value='LED 3 On' pin='3' s='1' onclick='setDiostate(this);'> "\
									"<input type='button' value='LED 3 Off' pin='3' s= '0' onclick='setDiostate(this);'>"\
									"<br>"\
									"<input type='button' value='LED 4 On' pin='4' s='1' onclick='setDiostate(this);'> "\
									"<input type='button' value='LED 4 Off' pin='4' s= '0' onclick='setDiostate(this);'>"\
									"</div>"\
									"<!-- to do -->"\
								"</body>"\
							"</html>"

#endif 

